<template>
	<!--重点企业分布-->
	<div class="enterprise-distribution">
		<normal-block chartID="chart1" title="上市企业" chartType="getStackBar" height="18vh" style="margin-bottom:1.7vh;overflow: hidden;">
			<template>
				<div class="enterprise1 enterprise">
					<div class="top-list-item" v-for="(item,index) in ListedEnterprises" :key="index" @click="toPath(item)">
						<div class="company-logo">
							<img :src="item.src" alt="">
						</div>
						<div class="rightBox">
							<ul>
								<li><span class="activeColor">首发上市日期：</span><span>{{ item.sfssrq }}</span></li>
								<li><span class="activeColor">股票代码：</span><span>{{ item.stockCode }}</span></li>
								<li><span class="activeColor">公司中文名称：</span><span class="companyName">{{ item.name }}</span></li>
							</ul>
						</div>
					</div>
				</div>
			</template>
		</normal-block>
		<normal-block chartID="chart1" title="高新企业" chartType="getStackBar" height="33vh" style="margin-bottom:1.7vh;overflow: hidden;">
			<template>
				<div class="enterprise2 enterprise">
					<div class="top-list-item" v-for="(item,index) in centerData" :key="index">
						<div v-for="(ite,index1) in item.data" :class="{topBox: index1 === 0, bottomBox: index1 === 1}">
							<div class="topdiv">
								<img :src="ite.img" alt="">
								<el-tooltip placement="top" :disabled="ite.qymc.length<=14">
									<div slot="content" >{{ ite.qymc }}</div>
								<span class="companyName" @click="toPath(ite)">{{ ite.qymc }}</span>
								</el-tooltip>
							</div>
							<div>
								<span class="activeColor">发证时间：</span><span>{{ ite.fzsj }}</span>
							</div>
							<div>
								<span class="activeColor">证书编号：</span><span>{{ ite.zsbh }}</span>
							</div>
						</div>
					</div>
					<page-full :pageSize="pageSize1" :total="totalPage" @currentChange="enterpriseCurrentChange"
					           style="position:absolute; right:0.5vw; bottom:0.5vh"></page-full>
				</div>
			</template>
		</normal-block>
		<normal-block chartID="chart1" title="四上企业" chartType="getStackBar" height="58vh" style="overflow: hidden;margin-bottom:2vh">
			<template>
				<div class="enterprise3 enterprise">
					<div class="left-list-item">
						<table-block :oprData="oprData" :pageSize="pageSize" :total="total" @currentChange="currentChange" @cellClick="cellClick" :currePage="currePage"></table-block>
					</div>
					<div class="right-list-item">
						<mapv-block :pointList="pointList" :center="center" :zoom="zoom" showMarker="xmfx" @markerClick="markerClick"></mapv-block>
					</div>
				</div>
			</template>
		</normal-block>
	</div>
</template>

<script>
import {getCompanyCommonData, getcompanyData, getcompanyData1, getcompanyData2, getcompanyMapData} from '@/api/pages.js'

export default {
	name: "distribution",
	components: {
		NormalBlock: () => import('@/components/normal-block'),
		TableBlock: () => import('@/components/table-block'),
		MapvBlock: () => import('@/components/mapv-block'),
		PageFull: () => import('@/components/pageFull-block')
	},
	props: {},
	data() {
		return {
			ListedEnterprises: [],
			centerData: [],
			pageSize: document.body.clientWidth > 1400 ? 15 : 8,
			pageSize1: 10,
			total: 0,
			totalPage: 0,
			oprData: {
				list: [],
				tableData: [],
			},
			pointList: [],
			center: {lng: 119.140177, lat: 35.56202},
			zoom: 9,
			companyName: '',
			companyId: '',
			currePage: 1
		}
	},
	computed: {},
	created() {
	},
	mounted() {
		this.getCompanyData('P005', 1, 3)
		this.getCompanyData1('P006', 1, 10)
		this.getCompanyData2('P007', 1, this.pageSize)
		this.getCompanyMapData('C029')
	},
	methods: {
		currentChange(e) {
			this.currePage = e
			this.getCompanyData2('P007', e, this.pageSize)
		},
		toPath(item) {
			if (item.name) {
				this.companyName = item.name
			} else if (item.qymc) {
				this.companyName = item.qymc
			}
			if (item.companyId) {
				this.companyId = item.companyId
			} else if (item.qyId) {
				this.companyId = item.qyId
			}
			sessionStorage.setItem('companyName', this.companyName)
			getCompanyCommonData('C099',this.companyId).then( res => {
				let flag = res.data.data.list[0].ssFlag
				this.$router.push({
					path: '/enterprise/tabswich/',
					query: {
						companyId: this.companyId,
						flag: flag
					}
				})
			})
			// sessionStorage.setItem('companyId',this.companyId)
		},
		cellClick(obj) {
			this.companyName = obj.row.name
			this.companyId = obj.row.id
			sessionStorage.setItem('companyName', this.companyName)
			getCompanyCommonData('C099',this.companyId).then( res => {
				let flag = res.data.data.list[0].ssFlag
				this.$router.push({
					path: '/enterprise/tabswich/',
					query: {
						companyId: this.companyId,
						flag: flag
					}
				})
			})
		},
		// 标点点击事件处理
		markerClick(obj) {
			this.companyName = obj.item.name
			this.companyId = obj.item.id
			sessionStorage.setItem('companyName', this.companyName)
			this.$router.push({
				path: '/enterprise/tabswich/',
				query: {
					companyId: this.companyId,//企业id
				}
			})
		},
		// 上市企业
		getCompanyData(busiCode, current, size) {
			getcompanyData(busiCode, current, size).then(res => {
				if (res.data.code === 200) {
					this.ListedEnterprises = res.data.data.list.records
				}
				this.ListedEnterprises.forEach((item,index)=>{
					if(item.stockCode==="600509"){
						item.src=require('../../assets/images/company01.png')
					}else if(item.name==="新疆天业股份有限公司"){
						item.src=require('../../assets/images/company02.png')
					}else if(item.name==="新疆西部牧业股份有限公司"){
						item.src=require('../../assets/images/company03.png')
					}
				})
			}).catch(err => {

			})
		},
		// 高新企业
		getCompanyData1(busiCode, current, size) {
			getcompanyData1(busiCode, current, size).then(res => {
				if (res.data.code === 200) {
					let datas = []
					let results = []
					res.data.data.list.records.forEach((item, index, arr) => {
						item.img = require('../../assets/images/company.png')
						datas.push(item)
					})
					for (let i = 0; i < datas.length; i += 2) {
						results.push({data: datas.slice(i, i + 2)})
					}
					this.centerData = results
					this.totalPage=res.data.data.list.total
					console.log('this.centerData', this.centerData)
				}
			}).catch(err => {

			})
		},
		enterpriseCurrentChange(e) {
			this.getCompanyData1('P006', e, 10)
		},
		// 四上企业
		getCompanyData2(busiCode, current, size) {
			getcompanyData2(busiCode, current, size).then(res => {
				if (res.data.code === 200) {
					this.oprData.list = res.data.data.list.records
					this.total = res.data.data.list.total
					res.data.data.tableData[4].width = "300px"
					res.data.data.tableData[0].width = "250px"
					res.data.data.tableData[1].width = "220px"
					this.oprData.tableData = res.data.data.tableData
					console.log(this.oprData.tableData)
                    this.oprData.tableData.forEach((item,index)=>{
						if(item.name==="主要介绍"){
							item.isShow=0
						}
					})
				}
			}).catch(err => {

			})
		},
		// 地图
		getCompanyMapData(busiCode) {
			getcompanyMapData(busiCode).then(res => {
				if (res.data.code === 200) {
					let mapData = []
					let lng = 0
					let lat = 0
					res.data.data.list.forEach((item, index, arr) => {
						mapData.push({
							name: item.name,
							lng: item.longtitude,
							lat: item.latitude,
							id: item.id,
							sfzdxm: 2
						})
						lng += parseFloat(item.longtitude) / res.data.data.list.length
						lat += parseFloat(item.latitude) / res.data.data.list.length
					})
					this.pointList = mapData
					this.center.lng = lng
					this.center.lat = lat
				}
			}).catch(err => {

			})
		}
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.enterprise-distribution {
	width: 100%;
	//height: 100%;
	padding: 6vh 1.3vw 4vh;
	box-sizing: border-box;

	.enterprise {
		width: 100%;
		height: calc(100% - 3.98vh);
		padding: .6vw 2vh;
		box-sizing: border-box;
	}

	.enterprise1 {
		display: flex;
		padding: 2vh 0;
		box-sizing: border-box;

		.top-list-item {
			flex: 1;
			border-right: 1px solid #1C9AF2;
			border-image: linear-gradient(rgba(18, 113, 171, 0.1), #1C9AF2, rgba(18, 113, 171, 0.1)) 10 30 10;
			padding-left: 2vw;
			box-sizing: border-box;

			.company-logo {
				width: 13vw;
				height: 80%;
				float: left;
				margin-top: .5vh;
				display: flex;
				background: #fff;
				border-radius: 5px;

				img {
					width: 100%;
					border-radius: 5px;
					cursor: pointer;
				}
			}

			.rightBox {
				width: 16vw;
				height: 100%;
				float: right;

				li {
					list-style: none;
					line-height: 3vh;

					span {
						color: #fff;
						font-size: 0.82vw;
						font-weight: 550;
						line-height: 2vh;
					}

					span.activeColor {
						color: #11AFFC
					}

					span.companyName {
						cursor: pointer;
					}
				}
			}
		}

		.top-list-item:last-child {
			border: none
		}
	}

	.enterprise2 {
		display: flex;
		position: relative;
		padding-bottom: 5vh;
		overflow-y: scroll;

		.top-list-item {
			flex: 1;
			border-right: 1px solid #1C9AF2;
			border-image: linear-gradient(rgba(18, 113, 171, 0.1), #1C9AF2, rgba(18, 113, 171, 0.1)) 10 30 10;
			padding: 0 1vw 0 2vw;
			box-sizing: border-box;
			.topdiv{
				display: flex;
				.companyName{
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					width: 13.5vw;
				}
			}
			.topBox {
				width: 100%;
				height: 50%;
				border-bottom: .5px dashed rgba(28, 154, 242, .5);
				padding-top: .2vh;
				box-sizing: border-box;

				div {
					list-style: none;
					line-height: 3.2vh;
					padding-left: 0.5vw;
					box-sizing: border-box;

					img {
						width: 1.2vw;
						height: 2.5vh;
						float: left;
						margin-right: .7vw;
						margin-top: .5vh;
					}

					span {
						color: #fff;
						font-size: 0.94vw;
					}

					span.activeColor {
						color: #0AC7FE;
						font-size: 0.95vw;
					}

					span.companyName {
						cursor: pointer;
					}
				}
			}

			.bottomBox {
				width: 100%;
				height: 50%;
				padding-top: 1.5vh;
				box-sizing: border-box;

				div {
					list-style: none;
					line-height: 3.2vh;
					padding-left: 0.5vw;
					box-sizing: border-box;

					img {
						width: 1.2vw;
						height: 2.5vh;
						float: left;
						margin-right: .7vw;
						margin-top: .5vh;
					}

					span {
						color: #fff;
						font-size: 0.94vw;
					}

					span.activeColor {
						color: #0AC7FE;
						font-size: 0.95vw;
					}

					span.companyName {
						cursor: pointer;
					}
				}
			}
		}

		.top-list-item:last-child {
			border: none
		}
	}

	.enterprise3 {
		width: 100%;

		.left-list-item {
			width: 49.5%;
			height: 100%;
			float: left;
			overflow-y: auto;
		}

		.right-list-item {
			width: 49.5%;
			height: 100%;
			float: right;
		}
	}
}
</style>
